import { Outlet,Link,useLocation } from "react-router-dom";
import { routerlist } from "../router/index";
import { Layout,Menu,Button } from "antd";
const { Header, Content, Footer,Sider } = Layout;
import { useTranslation } from 'react-i18next';
import Theme from "../computed/Theme";

export const god=(routes)=>{
    const { t, i18n } = useTranslation();
    return routes.map(route=>{
        const meneItem={
            label:t(route.meta.title),
            key:route.path
        }
        if(route.children){
            return {
                ...meneItem,
                children:god(route.children)
            }
        }
        return {
            ...meneItem,
            label:<Link to={route.path}>{t(route.meta.title)}</Link>
        }
    })
}

export default function Layouts(){
    const Location=useLocation()
    const { t, i18n } = useTranslation();
    const qie=()=>{
        i18n.changeLanguage(i18n.language==='zh'?'en':'zh')
    }
    return (
        <Layout> 
        <Header style={{background:'white' ,height:'35px',lineHeight:'35px',display:'flex',justifyContent:'right'}}>
            
            <Theme />
            <Button type="primary" onClick={qie} style={{borderRadius:'50%',marginRight:'30px',marginLeft:'20px',width:'35px'}}>{i18n.language==='zh'?'A':'中'}</Button>
            <div className="www">
                <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.YPQ2u_941Yslqn_y_zbvjwHaHa?w=199&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="" />
                
            </div><p>用户:jykl</p>
        </Header>
        <Layout>
            <Sider  theme='light' style={{minHeight:'100vh'}}>
                
                <Menu mode='inline' theme='light' selectedKeys={[Location.pathname]} items={god(routerlist)} />
            </Sider>
            <Content style={{background:'var(--background-color)',color:'var(--text-color)'}}>
                
                <Outlet />
            </Content>
        </Layout>
        </Layout>
    )
}